import React, { Component } from 'react'
import {inject,observer} from 'mobx-react'

@inject('apple')
@observer
class Total extends Component {
    render() {
        const {eatedApples,storedApples} =this.props.apple
        const eatedCount=eatedApples.length;
        const eatedWeight=eatedApples.reduce((total,apple)=>{
            return total+=apple.weight
        },0)
        const storedCount=storedApples.length
        const storedWeight=storedApples.reduce((total,apple)=>{
            return total+=apple.weight
        },0)
        return <div className="total">
            <div><div>当前</div><span>{storedCount} 个苹果，{storedWeight} 克</span></div>
            <div><div>已吃掉</div><span>{eatedCount} 个苹果，{eatedWeight} 克</span></div>
        </div>
    }
}
export default Total